<template>
  <div class="color-picker">
    <div
      v-for="item in predefineColors"
      :key="item"
      :style="{ backgroundColor: item }"
      @click="handleColorChange(item)"
      :class="['color-theme', editor.isActive(type, { color: item }) ? 'back-is-active' : '']"
    >
      <IconView name="selected" v-if="editor.isActive(type, { color: item })"></IconView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { Editor, getMarkAttributes } from '@tiptap/vue-3'
import IconView from './IconView.vue'
const props = defineProps({
  editor: {
    type: Editor,
    required: true
  },
  type: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['change'])
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  '#000000', // 黑色
  '#808080', // 灰色
  '#dedede', // 白色
  '#ffe4e1', // 浅粉色
  '#d3ffce', // 浅绿色
  '#add8e6', // 浅蓝色
  '#f08080', // 浅珊瑚色
  '#e6e6fa', // 浅紫色
  '#fafad2', // 浅金黄色
  '#ffe4b5', // 浅鹿皮色
  '#ffdead', // 浅鹿皮色
  '#f0e68c', // 卡其色
  '#e0ffff', // 浅青色
  '#f5f5dc', // 米色
  '#faf0e6', // 亚麻色
  '#ebf7ff',
  '#40507E'
])
const textColor = ref('')
const handleColorChange = (color: string) => {
  if (props.type === 'textStyle') {
    const new_color = getMarkAttributes(props.editor.state, 'textStyle').color
    textColor.value = color
    if (new_color == textColor.value) {
      props.editor.commands.unsetColor()
      return
    }
  }
  emits('change', color)
}
</script>

<style scoped lang="scss">
.color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  .color-theme {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px,
      rgba(0, 0, 0, 0.12) 0px 1px 8px;
  }
}
</style>
